<template>
	<view>
		<!-- readyStatus == 'show' || readyStatus == 'complete' -->
		<view id="poster" ref="posterView" v-if="readyStatus == 'show'" :style="{width:posterWidth+'px',height:posterHeight+'px'}">
			<view class="poster-box" v-if="posterConfig.bg_pic && posterConfig.bg_pic.is_show && posterConfig.bg_pic.url" :style="{backgroundImage:'url('+posterConfig.bg_pic.url+')'}" ></view>
			
			<view class="poster-content" v-if="posterConfig.qr_code && posterConfig.qr_code.is_show == 1"
				:style="{top:zoomRatioCompute(posterConfig.qr_code.top)+'px',left: zoomRatioCompute(posterConfig.qr_code.left)+'px',width: zoomRatioCompute(posterConfig.qr_code.size)+'px',height:zoomRatioCompute(posterConfig.qr_code.size) + 'px'}">
				<image :src="posterConfig.qr_code.value" style="width: 100%;height: 100%;"></image>
			</view>
			
			<template v-if="posterConfig.name && posterConfig.name.is_show == 1">
				<view class="poster-content" v-if="posterConfig.name.center == 2" style="width: 100%;text-align: center;" v-line-clamp="1"
					:style="{
						fontSize:zoomRatioCompute(posterConfig.name.font)+'px',
						color:posterConfig.name.color,
						top:zoomRatioCompute(posterConfig.name.top)+'px'
					}">
					{{posterConfig.name.value}}
				</view>
				<view class="poster-content" v-else v-line-clamp="1"
					:style="{
						fontSize:zoomRatioCompute(posterConfig.name.font)+'px',
						color:posterConfig.name.color,
						top:zoomRatioCompute(posterConfig.name.top)+'px',
						left: zoomRatioCompute(posterConfig.name.left)+'px'
					}">
					{{posterConfig.name.value}}
				</view>
			</template>
			
			<view class="poster-content" v-if="posterConfig.head && posterConfig.head.is_show == 1" style="border-radius: 50%;overflow: hidden;"
				:style="{top:zoomRatioCompute(posterConfig.head.top)+'px',left: zoomRatioCompute(posterConfig.head.left)+'px',width: zoomRatioCompute(posterConfig.head.size)+'px',height:zoomRatioCompute(posterConfig.head.size) + 'px'}">
				<image :src="posterConfig.head.value" style="width: 100%;height: 100%;"></image>
			</view>
			
			<template v-if="posterConfig.nickname && posterConfig.nickname.is_show == 1">
				<view class="poster-content" v-if="posterConfig.nickname.center == 2" style="width: 100%;text-align: center;" v-line-clamp="1"
					:style="{
						fontSize:zoomRatioCompute(posterConfig.nickname.font)+'px',
						color:posterConfig.nickname.color,
						top:zoomRatioCompute(posterConfig.nickname.top)+'px'
					}">
					{{posterConfig.nickname.value}}
				</view>
				<view class="poster-content" v-else v-line-clamp="1"
					:style="{
						fontSize:zoomRatioCompute(posterConfig.nickname.font)+'px',
						color:posterConfig.nickname.color,
						top:zoomRatioCompute(posterConfig.nickname.top)+'px',
						left: zoomRatioCompute(posterConfig.nickname.left)+'px'
					}">
					{{posterConfig.nickname.value}}
				</view>
			</template>
			
			<template v-if="posterConfig.price && posterConfig.price.is_show == 1">
				<view class="poster-content" v-line-clamp="1"
					:style="{
						fontSize:zoomRatioCompute(posterConfig.price.font)+'px',
						color:posterConfig.price.color,
						top:zoomRatioCompute(posterConfig.price.top)+'px',
						left: zoomRatioCompute(posterConfig.price.left)+'px'
					}">
					{{posterConfig.price.value}}
				</view>
			</template>
			
			<template v-if="posterConfig.desc && posterConfig.desc.is_show == 1">
				<view class="poster-content" v-line-clamp="1"
					:style="{
						fontSize:zoomRatioCompute(posterConfig.desc.font)+'px',
						color:posterConfig.desc.color,
						top:zoomRatioCompute(posterConfig.desc.top)+'px',
						left: zoomRatioCompute(posterConfig.desc.left)+'px'
					}">
					{{posterConfig.desc.text}}
				</view>
			</template>
			
			<view class="poster-content" v-if="posterConfig.pic && posterConfig.pic.is_show == 1"
				:style="{top:zoomRatioCompute(posterConfig.pic.top)+'px',left: zoomRatioCompute(posterConfig.pic.left)+'px',width: zoomRatioCompute(posterConfig.pic.width)+'px',height:zoomRatioCompute(posterConfig.pic.height) + 'px'}">
				<image :src="posterConfig.pic.value" style="width: 100%;height: 100%;"></image>
			</view>
			
			
		</view>
		
		
		<view v-if="readyStatus == 'complete'" style="margin: auto;" :style="{width:posterWidth+'px',height:posterHeight+'px'}">
			<image :src="resultUrl" style="width: 100%;height: 100%;"></image>
		</view>
		
		<view v-if="readyStatus == 'complete'" style="text-align: center;padding: 30rpx 60rpx;">
			<view>长按图片保存至本地</view>
		</view>
		<view v-if="readyStatus == 'complete'" style="padding: 30rpx;">
			<u-button type="warning" @click="navBack()">返回</u-button>
		</view>
	</view>
</template>

<script>
	import QRCode from 'qrcode';
	import html2canvas from 'html2canvas';
	import { snapdom } from '@zumer/snapdom';
	let that;

	//后端设置时海报展示的大小，手机端渲染时等比缩放
	const backendPosterView = {
		width:375,
		height:667
	}
	
	
	export default {
		data(){
			return {
				readyStatus: 'waiting',
				params:{},
				zoomRatio:1,
				posterWidth: 0,
				posterHeight: 0,
				posterConfig:{},
				
				
				resultUrl:''
			}
		},
		beforeCreate(){
			that = this;
		},
		onLoad(opt){
			this.params = opt;
			
			
			uni.showLoading({title:'请稍候...'});

			this.getPosterData();
		},
		onShow(){
			let system = uni.getSystemInfoSync();
			//海报展示窗口最大宽度为95%
			this.posterWidth = (system.windowWidth * 0.95).toFixed(2);
			//计算缩放比例
			this.zoomRatio = (this.posterWidth / backendPosterView.width).toFixed(2);
			//计算海报高度
			this.posterHeight = ( backendPosterView.height * this.zoomRatio).toFixed(2);
		},
		computed:{
			zoomRatioCompute(){
				return value =>{
					return (value * that.zoomRatio).toFixed(2)
				}
			}
		},
		methods:{
			errorHandler(content){
				uni.hideLoading();
				uni.showModal({
					title:'温馨提示',
					content,
					showCancel:false,
					success(res){
						if(res.confirm) that.navBack();
					}
				})
			},
			
			async getPosterData(){
				const res = await that.$http.request({
					url: this.$api.default.posterData,
					method: 'POST',
					data:this.params
				});
				
				if(res.code !== 0) {
					return that.errorHandler(res.msg);
				}
				
				that.posterConfig = res.data.posterConfig;

				if(res.data.qrcodeType != 'image'){
					let content = that.posterConfig.qr_code.value;
					let size = that.zoomRatioCompute(that.posterConfig.qr_code.size);
					that.posterConfig.qr_code.value = await QRCode.toDataURL(content,{width:size,height:size,margin:1});
				}
				that.readyStatus = 'show';				
				
				// setTimeout(async function(){
				// 	const poster = document.getElementById('poster');
				// 	that.resultUrl = await snapdom.toBlob(poster);
				// 	console.log(that.resultUrl)
				// 	that.readyStatus = 'complete';
				// 	uni.hideLoading();
				// },1500)

				setTimeout(async function(){
					window.pageYoffset = 0;
					document.documentElement.scrollTop = 0;
					document.body.scrollTop = 0;
					const canvas = await html2canvas(document.getElementById('poster'), { 
						width: document.getElementById('poster').clientWidth,
						height: document.getElementById('poster').clientHeight,
						scale:3,
						useCORS: true,
					});
					that.resultUrl = canvas.toDataURL('image/png', 1);
					that.readyStatus = 'complete';
					uni.hideLoading();
				},1500)
			},


		}
	}
</script>

<style lang="scss">
	// #poster{width:713rpx;height: 1257rpx;position: relative;margin: auto;}
	#poster{position: relative;margin: auto;}
	.poster-box{width: 100%;height: 100%; background-size: 100% 100%;background-position: center;}
	.poster-content{position: absolute;z-index: 5;display:block;}
</style>